03_03 Transitions

Transitions

Of course you can animate using CSS styles and classes, but Vue gives you additional feature that makes items easier to animate with transitions.

transition tag

  <transition name="transitionName"></transition>

• name parameter
• Creates classes
• Trigger animations

The transition tag gives you a way to modify your apps when items are inserted, updated or removed from your page. You wrap the transition tag around the element you wish to animate.

The name parameter is optional, but if you add it, it will become a prefix in a group of transition classes that are automatically created during the life of your content.

These will allow you to control the items are animated based on different triggers that happen in the lifecycle of the items.

Enter/Leave Classes

.v-enter-fromBefore element inserted
.v-enter-activeDuring entering phase
.v-enter-toAfter element inserted

.v-leave-fromWhen leaving triggered
.v-leave-activeDuring leaving phase
.v-leave-toAfter leaving triggered

• v- default prefix
• enter vs leave triggers
• from vs to triggers
• active sequences

Try itgo.raybo.org/2EEA

There are six classes you can use and here they are.

• if you don't include a name parameter in the transition tag, then the classes will have a default prefix of v-, but if you do, the v will be replaced by with whatever you placed in the name parameter, that way you can have more than one transition playing.

• There are two events that you're interested in when animating, wether the items you're animating are entering the scene, or leaving the scene.

• Then the from option option lets you set up the beginning state of your animation, the to option lets you control the ending frame of your animation.

• The active state lets you control how that animation will play, so this is a good place to set up easing curves.

Enter/Leave Properties

enter-from-classBefore element inserted
enter-active-classDuring entering phase
enter-to-classAfter element inserted

leave-from-classWhen leaving triggered
leave-active-classDuring leaving phase
leave-to-classAfter leaving triggered

<transition property-class="some-class">
  ...
</transition>

• Libraries animate.css

Animate.cssanimate.style
Try ithttps://go.raybo.org/2EEM

If you'd rather work with existing classes instead of manually creating them, you can use a set of properties on the template to call them.

They go inside the transition component tag as properties and link to an existing class.

Enter/Leave Hooks

@before-enterBefore element inserted
@enterDuring entering phase
@after-enterAfter element inserted
@enter-cancelledAfter element inserted

@before-leaveWhen leaving triggered
@leaveDuring leaving phase
@after-leaveAfter leaving triggered
@leave-cancelledAfter element inserted

<transition @hook="myMethod">
  ...
</transition>

myMethod(el, done) {
  done()
}

Try itgo.raybo.org/2EJV

Docsgo.raybo.org/2E0l

There's a full set of events that you can use in your templates and scripts to take care of things throughout the animation evens.

The events will receive an el parameter and some events can pass along a done callback in certain instances.

Practice

1. Animate the cart dropdown
2. Use the <transition> tag
3. Add name property to the transition
4. Make total red on dropdown

Let's try using classes instead of inline styles on the cart button.
Try using an object to control how the classes work.
Use a computed class